<template>
    <!-- animate.css效果示例 -->
    <div>
    <button @click="isShow=!isShow">show/hide</button>
    <transition-group 
        appear 
        name="animate__animated animate__bounce" 
        enter-active-class="animate__backInUp"
        leave-active-class="animate__zoomOutUp"
    >
        <h1 v-show='isShow' key="01">test1</h1>
        <h1 v-show='!isShow' key="02">test1</h1>
        <h1 v-show='isShow' key="03">test1</h1>
        <h1 v-show='!isShow' key="04">test1</h1>
        <h1 v-show='isShow' key="05">test1</h1>
        <h1 v-show='!isShow' key="06">test1</h1>
        <h1 v-show='isShow' key="07">test1</h1>
        <h1 v-show='!isShow' key="08">test1</h1>
    </transition-group>
    </div>  
</template>

<script>
    /* 安装animate.css */
    /* npm install animate.css */
    // 引入animate.css，资料在https://www.npmjs.com/ https://www.npmjs.com/package/animate.css https://animate.style/
    import "animate.css"
    export default {
        name : "Test2",
        data(){
            return {
                isShow:true
            }
        }
    }
</script>

<style scoped>
    h1{
        background-color: orange;
    }

</style>